<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    ul,
    ol {
      list-style: none;
    }

    .carousel {
      position: relative;
      width: 880px;
      height: 550px;
      border: 1px solid #333;
      margin: 50px auto;
    }

    .pic li {
      position: absolute;
      left: 0;
      top: 0;
      width: 880px;
      height: 550px;
      display: none;
    }

    .pic li.current {
      display: block;
    }

    .btn a {
      position: absolute;
      top: 50%;
      width: 80px;
      height: 80px;
      margin-top: -40px;
      background-color: rgba(255, 255, 255, 0.3);
      text-decoration: none;
      color: #444;
      text-align: center;
      line-height: 80px;
      font-size: 60px;
      font-family: "SimSun";
    }

    .btn .left {
      left: 10px;
    }

    .btn .right {
      right: 10px;
    }

    .btn a:hover {
      background-color: rgba(255, 255, 255, 0.7);
    }

    .sub {
      position: absolute;
      bottom: 30px;
      left: 50%;
      width: 200px;
      height: 40px;
      margin-left: -100px;
      border-radius: 20px;
      background-color: rgba(255, 255, 255, 0.3);
    }

    .sub li {
      float: left;
      width: 20px;
      height: 20px;
      margin: 10px;
      border-radius: 50%;
      background-color: #ccc;
      cursor: pointer;
    }

    .sub li.current {
      background-color: #0ff;
    }
  </style>
</head>

<body>
  <div class="carousel" id="carousel">
    <ul class="pic" id="pic">
      <li class="current"><img src="images/lunbo/01.jpg" alt=""></li>
      <li><img src="images/lunbo/02.jpg" alt=""></li>
      <li><img src="images/lunbo/03.jpg" alt=""></li>
      <li><img src="images/lunbo/04.jpg" alt=""></li>
      <li><img src="images/lunbo/05.jpg" alt=""></li>
    </ul>
    <!-- 左右按钮 -->
    <div class="btn" id="btn">
      <a href="javascript:;" class="left" id="leftbtn">&lt;</a>
      <a href="javascript:;" class="right" id="rightbtn">&gt;</a>
    </div>
    <!-- 指示器 -->
    <ol class="sub" id="sub">
      <li class="current"></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ol>
  </div>
  <script>


    // 1.获取元素
      var carousel = document.getElementById("carousel");
      var pic = document.getElementById("pic");
      var imgs =pic.children;
      var btn = document.getElementById("btn");
      var sub = document.getElementById("sub");
      var subs =sub.children;
      var leftbtn = document.getElementById("leftbtn");
      var rightbtn = document.getElementById("rightbtn");
      // 第n张图
      var step = 0;
      // 计数器
      var set = 0;
    // 2.右按钮事件，点击切换下一个
     leftbtn.onclick = function () {
      step--;
      if (step < 0) {
        step = 4;
      }
      fun()
     }
    // 3.左按钮事件，点击切换上一个
    rightbtn.onclick = function () {
      step++;
      if (step > 4) {
        step = 0;
      }
      fun()
    }
    // 4.下标圆点事件，点击显示对应的图片
    for (let j = 0; j < subs.length; j++) {
        //存储自己的下标
        subs[j].index = j 
      subs[j].onclick = function () {
       for (let i = 0; i < imgs.length; i++) {
         imgs[i].className = " ";
         subs[i].className = " ";
       }
       imgs[this.index].classList.add("current");
       subs[this.index].classList.add("current");
       step = this.index;
      }
    }
    // 5.自动播放
    set = window.setInterval(function () {
      step++;
      if (step > 4) {
        step = 0;
      }
      fun()
    },1000);
    // 6.鼠标移入自动停播
    carousel.onmousemove = function () {
      clearInterval(set);
    }
    // 7.鼠标移出自动播放
    carousel.onmouseout = function () {
      clearInterval(set);
      set = window.setInterval(function () {
        step++;
      if (step > 4) {
        step = 0;
      }
      fun()
    },1000);
    }
    function fun() {
      for (let i = 0; i < imgs.length; i++) {
        imgs[i].className = " ";
        subs[i].className = " ";
      }
      imgs[step].classList.add("current");
      subs[step].classList.add("current");
    }
  </script>
</body>

</html>